<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
        aria-hidden="true">&times;</button>
    <h4 class="modal-title" translate="yes">Synchronize users</h4>
</div>

<div class="modal-body">
    <p translate="yes">Select the users that you would like to be synchronized with {{#strong}}{{host}}{{/strong}}</p>

{{#perm_failed}}
    <div class="pf-c-alert pf-m-danger pf-m-inline dialog-error" aria-label="inline danger alert">
      <div class="pf-c-alert__icon">
          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
      </div>
      <h4 translate="yes" class="pf-c-alert__title">Error loading users: {{perm_failed}}</h4>
    </div>
{{/perm_failed}}

{{^perm_failed}}
    <div id="sync-users">
        <table class="table">
        <tbody>
        {{^users}}
            <tr>
                  <td>
                    <div class="center-spinner">
                        <div class="spinner spinner-lg"></div>
                    </div>
                  </td>
            </tr>
        {{/users}}

        {{#users}}
              <tr>
                  <td><input type="checkbox" name="{{username}}" {{#checked}}checked=checked{{/checked}} /></td>
                  <td>{{username}}</td>
                  <td>{{name}}</td>
                  <td>&#8226;&#8226;&#8226;&#8226;&#8226;</td>
                  <td>{{formated_groups}}</td>
              </tr>
        {{/users}}
        </tbody>
        </table>
    </div>

    {{#needs_auth}}
    <div>
        {{#needs_root}}
        <p translate="yes">You are connected to {{#strong}}{{host}}{{/strong}}, however in order to synchronize users, a user with superuser privileges is required.</p>
        {{/needs_root}}
        {{^needs_root}}
        <p translate="yes">In order to synchronize users, you need to log in to {{#strong}}{{host}}{{/strong}}.</p>
        {{/needs_root}}
        <table class="form-table-ct">
            <tr>
                <td translate="yes">User name</td>
                <td>
                    <input class="form-control" id="sync-username" type="text" />
                </td>
            </tr>
            {{#allows_password}}
            <tr>
                <td translate="yes">Password</td>
                <td>
                    <input class="form-control" id="sync-password" type="password" />
                </td>
            </tr>
            {{/allows_password}}
        </table>
    </div>
    {{/needs_auth}}
{{/perm_failed}}
</div>

<div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal" translate="yes">Cancel</button>
    <button class="btn btn-primary disabled" translate="yes">Synchronize</button>
</div>
